<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为云</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1922513_c1dbdmqfesm.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部 -->
  <div class="header-con">
    <!-- 上测 logo-->
    <div class="header-th clear_fix">
      <h1 class="logo">
        <a href="###"><img src="./images/logo.png" alt=""></a>
      </h1>
      <div class="logo-l clear_fix">
        <!-- 搜索框 -->
        <form action="">
          <input id="search" type="text" placeholder="搜索">
          <div class="btn-box">
            <input type="button" value="">
            <span class="iconfont icon-fangdajing len"></span>
          </div>
        </form>
        <ul class="logo-l-nav">
          <li>
            <a href="###">中国站</a>
            <span class="iconfont icon-xiabiao1 sanjiao"></span>
            <div class="nav-list">
              <p class="international international1">international</p>
              <div class="international">English</div>
              <div class="international">Espanl</div>
              <div class="international">Portugues</div>
              <div class="international">简体中文</div>
              <p class="chinese chinese1">中国站</p>
              <div class="chinese">简体中文</div>
              <div class="chinese">English</div>
            </div>
          </li>
          <li><a href="###">文档</a></li>
          <li><a href="###">备案</a></li>
          <li><a href="###">控制台</a></li>
        </ul>
        <div class="login-box">
          <a id="login" href="###">登录</a>
          <a id="register" href="###">注册</a>
        </div>
      </div>
    </div>
    <!-- 下测 导航-->
    <div class="header-nav">
      <ul>
        <li>
          <a href="###">关于华为云</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a class="active" href="###">最新活动</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a class="no-sanjiao" href="###">产品</a>
        </li>
        <li>
          <a href="###">解决方案</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a href="###">EL企业智能</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a class="no-sanjiao" href="###">定价</a>
        </li>
        <li>
          <a href="###">云市场</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a href="###">合作伙伴</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a href="###">开发者</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
        <li>
          <a href="###">支持与服务</a>
          <span class="iconfont icon-xiabiao1 sanjiao "></span>
        </li>
      </ul>
      <!-- 鼠标滑过nav显示的 内容 -->
      <div class="nav-tab">
        <!-- 每一项内容 -->
        <div class="nav-tab-con">
          1
        </div>
        <div class="nav-tab-con">
          2
        </div>
        <div class="nav-tab-con">
          3
        </div>
      </div>
    </div>
  </div>

  <!-- 主体区域 -->
  <div class="main-con">
    <!-- 轮播图区域 -->
    <div class="focus-box">
      <!-- <ul class="focus">
        <li><a href="###"><img src="" alt=""></a></li>
      </ul> -->
      <!-- 轮播图标题区域 -->
      <div class="focus-title">
        <h2>云上优选 特惠来袭</h2>
        <h4>精选30+云产品，助力企业轻松上云</h4>
      </div>
      <!-- 轮播图广告区域 -->
      <div class="focus-ad clear_fix">
        <!-- 每一项 -->
        <div class="focus-ad-item active">
          <span class="icon"></span>
          <div class="ad-box">
            <div class="h">1核2G云服务器281元</div>
            <div class="p">100%性能基线，开发者建站必备</div>
          </div>
        </div>
        <div class="focus-ad-item">
          <span class="icon"></span>
          <div class="ad-box">
            <div class="h">1核2G云服务器281元</div>
            <div class="p">100%性能基线，开发者建站必备</div>
          </div>
        </div>
        <div class="focus-ad-item">
          <span class="icon"></span>
          <div class="ad-box">
            <div class="h">1核2G云服务器281元</div>
            <div class="p">100%性能基线，开发者建站必备</div>
          </div>
        </div>
        <div class="focus-ad-item">
          <span class="icon icon4"></span>
          <div class="ad-box">
            <div class="h">1核2G云服务器281元</div>
            <div class="p">100%性能基线，开发者建站必备</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 云速建站 -->
    <div class="cloud-main-con">
      <!-- 云速 nav -->
      <div class="cloud-nav clear_fix">
        <!-- 每一项 -->
        <div class="cloud-nav-item clear_fix">
          <img class="img" src="./images/cloud-nav-01_03.jpg" alt="">
          <div class="cloud-nav-r">
            <div class="h">精美模板</div>
            <div class="p">全行业覆盖</div>
          </div>
        </div>
        <!-- 每一项 -->
        <div class="cloud-nav-item clear_fix">
          <img class="img" src="./images/cloud-nav-01_03.jpg" alt="">
          <div class="cloud-nav-r">
            <div class="h">精美模板</div>
            <div class="p">全行业覆盖</div>
          </div>
        </div>
        <!-- 每一项 -->
        <div class="cloud-nav-item clear_fix">
          <img class="img" src="./images/cloud-nav-01_03.jpg" alt="">
          <div class="cloud-nav-r">
            <div class="h">精美模板</div>
            <div class="p">全行业覆盖</div>
          </div>
        </div>
        <!-- 每一项 -->
        <div class="cloud-nav-item clear_fix">
          <img class="img" src="./images/cloud-nav-01_03.jpg" alt="">
          <div class="cloud-nav-r">
            <div class="h">精美模板</div>
            <div class="p">全行业覆盖</div>
          </div>
        </div>
      </div>

      <!-- 云速建站解决方案 -->
      <div class="cloud-case-con">
        <h3 class="title">华为云快速建站解决方案</h3>
        <p class="paragraph">专业服务，开创建站新高度</p>
        <div class="cloud-case-box clear_fix">
          <!-- 每一项 -->
          <div class="cloud-case-item">
            <div class="cloud-case-title com-title">
              <div class="h">云速建站-模板自助</div>
              <div class="p">模板建站，自助拖拽，一站式建立</div>
            </div>
            <div class="cloud-case-tbody">
              <ul>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
              </ul>
            </div>
            <div class="cloud-btn-box clear_fix">
              <div class="pay-btn">立即购买</div>
              <div class="pay-use">立即使用</div>
            </div>
          </div>
          <!-- 每一项 -->
          <div class="cloud-case-item">
            <div class="cloud-case-title com-title">
              <div class="h">云速建站-模板自助</div>
              <div class="p">模板建站，自助拖拽，一站式建立</div>
            </div>
            <div class="cloud-case-tbody">
              <ul>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
                <li>
                  <i class="iconfont icon-zhengque-copy success"></i><a href="###">预制免费千套模板</a>
                </li>
              </ul>
            </div>
            <div class="cloud-btn-box clear_fix">
              <div class="pay-btn">立即购买</div>
              <div class="pay-use">立即使用</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 云速建站 -->
    <div class="cloud-bulid-con">
      <h3 class="title">云速建站</h3>
      <p class="paragraph">自带华为空间，无需IT技术，PPT式可视化建站 <a href="###">查看产品特性清单</a></p>
      <div class="cloud-bulid-box">

        <div class="cloud-bulid-item">
          <div class="cloud-bulid-title com-title">
            <!-- <div class="cloud-bulid-h h">入门版-官网展示型</div>
            <div class="cloud-bulid-p p">适合个人、小企业，官网形象展示</div> -->
          </div>

          <div class="cloud-space">
            <!-- <i class="iconfont icon-dian dian"></i>华为云空间 <span>8G</span> (不支持视频存储) -->
          </div>

          <div class="cloud-list">
            <ul id="list" class="clear_fix">
              <!--     <li>
                <span>
                  <i class="iconfont icon-zhengque-copy success"></i>
                </span>
                <a href="###">免费模板（PC站+手机站）600个</a>
              </li> -->
              <!-- <li>
              <span>
                <i class="iconfont icon-zhengque-copy success"></i>
              </span>
              <a href="###">小程序模板 30个</a>
            </li> -->
            </ul>
          </div>

          <div class="shop-show">
            <!-- <p class="specs">
              规格 <span></span>
            </p>
            <p class="node">
              节点<select name="" id="selects">
                <option value=""></option>
              </select>
            </p> -->
            <div class="price-box">
              <!-- <div class="price-l">
                <div class="price-t">
                  <span class="price">￥398.00</span>/年
                </div>
                <del>原价￥500/年</del>
              </div>
              <div class="price-r price-pay">
                立即购买
              </div> -->
            </div>
          </div>
          <div class="price-ad">
            <!-- <p>
              <span class="iconfont icon-dian dian"></span>
              <span>1</span>
            </p>
            <p>
              <span class="iconfont icon-dian dian"></span>
              <span>1</span>
            </p> -->
          </div>
        </div>
      </div>
    </div>

    <!-- 客户案例 -->
    <div class="customer-con">
      <h3 class="title">客户案例与精品模板</h3>
      <h4 class="paragraph">
        <a href="###">预览精美模板</a>
      </h4>
      <div class="customer-box">
        <div class="customer-th clear_fix">
          <div class="customer-th-case active">建站案例</div>
          <div class="customer-th-case">精美模板</div>
        </div>
        <div class="customer-tb">
          <div class="customer-tb-item conActive clear_fix">
            <dl>
              <dt><a href="###"><img src="./images/customer-tb01_03.jpg" alt=""></a></dt>
              <dd>
                <a href="###">通讯、数码行业</a>
              </dd>
            </dl>
            <dl>
              <dt><a href="###"><img src="./images/customer-tb01_03.jpg" alt=""></a></dt>
              <dd>
                <a href="###">通讯、数码行业</a>
              </dd>
            </dl>
            <dl>
              <dt><a href="###"><img src="./images/customer-tb01_03.jpg" alt=""></a></dt>
              <dd>
                <a href="###">通讯、数码行业</a>
              </dd>
            </dl>
            <dl>
              <dt><a href="###"><img src="./images/customer-tb01_03.jpg" alt=""></a></dt>
              <dd>
                <a href="###">通讯、数码行业</a>
              </dd>
            </dl>
            <dl>
              <dt><a href="###"><img src="./images/customer-tb01_03.jpg" alt=""></a></dt>
              <dd>
                <a href="###">通讯、数码行业</a>
              </dd>
            </dl>
            <dl>
              <dt><a href="###"><img src="./images/customer-tb01_03.jpg" alt=""></a></dt>
              <dd>
                <a href="###">通讯、数码行业</a>
              </dd>
            </dl>
          </div>
          <div class="customer-tb-item clear_fix">
            2
          </div>
        </div>
      </div>
    </div>

    <!-- 定制网站 -->
    <div class="make-con">
      <h3 class="title">定制网站建设</h3>
      <h4 class="paragraph">个性化设计/1V1的服务/安全稳定</h4>
      <div class="make-box clear_fix">
        <!--  <div class="make-item">
          <div class="make-item-title com-title">
            <div class="cloud-bulid-h h">基础版</div>
            <div class="cloud-bulid-p p">企业展示型官网</div>
          </div>
          <div class="make-design">
            <div class="make-design-title">.设计服务</div>
            <ul id="list" class="clear_fix">
              <li>
                <span>
                  <i class="iconfont icon-zhengque-copy success"></i>
                </span>
                <a href="###">网站原型设计</a>
              </li>
            </ul>
          </div>
          <div class="make-design">
            <div class="make-design-title">.设计服务</div>
            <ul id="list" class="clear_fix">
              <li>
                <span>
                  <i class="iconfont icon-zhengque-copy success"></i>
                </span>
                <a href="###">网站原型设计</a>
              </li>
            </ul>
          </div>
          <div class="price-box">
            <div class="price-l">
              <div class="price-t">
                <span class="price">￥398.00</span>/年
              </div>
              <p>原价￥500/年</p>
            </div>
            <div class="price-r price-pay">
              立即购买
            </div>
          </div>
        </div> -->
      </div>
    </div>

    <!--定制网站标准化 standard-->
    <div class="make-standard">
      <h3 class="title">定制网站建设标准化服务流程</h3>
      <div class="make-standard-box"><img src="./images/make.standard_03.jpg" alt=""></div>
    </div>
  </div>

  <!-- 快速建站攻略 	strategy-->
  <div class="make-strategy">
    <h3 class="title">快速建站攻略</h3>
    <h4 class="paragraph"><a href="###">建站专家论坛</a><a href="###">FAQ</a> <a href="###">建站视频教程</a> </h4>
    <div class="nake-strategy-box">
    </div>
  </div>

  <!-- 建站相关服务 -->
  <div class="make_about">
    <h3 class="title">建站相关云服务</h3>
    <div class="make_about-box">
      <!-- <div class="make-item make-box-item clear_fix">
        <div class="make-item-title com-title">
          <div class="cloud-bulid-h h">域名注册</div>
          <div class="cloud-bulid-p p">企业品牌&知识权保护必备</div>
        </div>
        <div class="make-design">
          <ul id="list" class="clear_fix">
            <li>
              <span>
                <i class="iconfont icon-zhengque-copy success"></i>
              </span>
              <a href="###">网站原型设计</a>
            </li>
          </ul>
        </div>
        <div class="price-box">
          <div class="price-l">
            <div class="price-t">
              <span class="price">￥9.00</span>/年起
            </div>
            <p>原价￥33/年起</p>
          </div>
          <div class="price-r price-pay">
            立即购买
          </div>
        </div>
      </div> -->

    </div>
  </div>

  <!-- 网站备案 record（记录） -->
  <div class="web-record">
    <h3 class="title">网站备案</h3>
    <div class="border-bottom center"></div>
    <p class="record-msg">华为云提供备案专属服务支持，快速初审，备案幕布免费</p>
    <button class="look-com center">查看详情</button>
  </div>

  <!-- 云速建站 cloud-bright -->
  <div class="cloud-bright">
    <h3 class="title">云速建站亮点</h3>
    <div class="cloud-bright-box clear_fix">
      <!-- 每一项 -->
      <div class="cloud-bright-item clear_fix">
        <div class="cloud-bright-l">
          <a href="###"><img src="" alt=""></a>
        </div>
        <div class="cloud-bright-r">
          <div class="cloud-bright-r-h">
            丰富的模板及素材库
          </div>
          <div class="cloud-bright-r-p">
            7大色系、60+行业覆盖、200+套模板、100000+图片库
          </div>
        </div>
      </div>
      <div class="cloud-bright-item clear_fix">
        <div class="cloud-bright-l">
          <a href="###"><img src="" alt=""></a>
        </div>
        <div class="cloud-bright-r">
          <div class="cloud-bright-r-h">
            丰富的模板及素材库
          </div>
          <div class="cloud-bright-r-p">
            7大色系、60+行业覆盖、200+套模板、100000+图片库
          </div>
        </div>
      </div>
      <div class="cloud-bright-item clear_fix">
        <div class="cloud-bright-l">
          <a href="###"><img src="" alt=""></a>
        </div>
        <div class="cloud-bright-r">
          <div class="cloud-bright-r-h">
            丰富的模板及素材库
          </div>
          <div class="cloud-bright-r-p">
            7大色系、60+行业覆盖、200+套模板、100000+图片库
          </div>
        </div>
      </div>
      <div class="cloud-bright-item clear_fix">
        <div class="cloud-bright-l">
          <a href="###"><img src="" alt=""></a>
        </div>
        <div class="cloud-bright-r">
          <div class="cloud-bright-r-h">
            丰富的模板及素材库
          </div>
          <div class="cloud-bright-r-p">
            7大色系、60+行业覆盖、200+套模板、100000+图片库
          </div>
        </div>
      </div>
      <div class="cloud-bright-item clear_fix">
        <div class="cloud-bright-l">
          <a href="###"><img src="" alt=""></a>
        </div>
        <div class="cloud-bright-r">
          <div class="cloud-bright-r-h">
            丰富的模板及素材库
          </div>
          <div class="cloud-bright-r-p">
            7大色系、60+行业覆盖、200+套模板、100000+图片库
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 常见问题 -->
  <div class="frequently-question">
    <h3 class="title">常见问题</h3>
    <div class="frequently-question-box clear_fix">
      <!-- 每一项 -->
      <div class="frequently-question-item">
        <div class="frequently-question-item-title">
          域名注册<span class="iconfont icon-changjiantou right_arrow"></span>
        </div>
      </div>

    </div>
  </div>
  <script src="./js/data.js"></script>
  <script src="./js/index.js"></script>
</body>
<!-- paragraph -->

</html>